
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>证卡打印</title>
    <link rel="stylesheet" type="text/css" href="http://zwtest.benxiangai.com/net/v2/static/font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="http://zwtest.benxiangai.com/net/v2/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="http://zwtest.benxiangai.com/net/v2/static/css/public.css">

    <script src="http://zwtest.benxiangai.com/net/v2/modules/main.js"></script>
    <script src="http://zwtest.benxiangai.com/net/v2/modules/CardPrint.js"></script>

    <!-- 代码调试插件 -->
    <link rel="stylesheet" href="http://zwtest.benxiangai.com/net/v2/static/js/CodeMirror/lib/codemirror.css" />
    <script src="http://zwtest.benxiangai.com/net/v2/static/js/CodeMirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="http://zwtest.benxiangai.com/net/v2/static/js/CodeMirror/theme/distEditor.min.css">
    <script src="http://zwtest.benxiangai.com/net/v2/static/js/CodeMirror/mode/javascript/javascript.js"></script>
</head>

<body>
<div id="raio_app" class="CardPrinter">
    <header>
        <div class="left">
            <a href="http://zwtest.benxiangai.com/net/v2/index.html" class="returnHome" id="returnHome">主页</a>
        </div>
        <div class="right breadcrumb">
            <i class="iconfont icon-daohang"></i>
            <span>您现在的位置:</span>
            <span>
                    <a href="http://zwtest.benxiangai.com/net/v2/index.html">首页</a>
                    <span>/</span>
                </span>
            <span>
                    <a href="javascript:void(0)" onclick="location.reload()" class="this">证卡打印</a>
                </span>
        </div>
    </header>
    <section class="IEscrollbar">
        <h2>证卡打印
            <i class="iconfont icon-biaotitubiao"></i>
        </h2>
        <article style="opacity: 0;">
            <div class="code_view">
                <div class="title">
                    <h3>JSON参数调试</h3>
                </div>
                <textarea class="form-control" id="code" name="code"></textarea>
                <div class="btn_wrap">
                    <button type="button" class="btn btn_success" onclick="card_status()">获取打印机状态</button>
                    <button type="button" class="btn btn_primary" onclick="card_print()">打印证卡</button>
                </div>
            </div>
            <div class="effect_view">
                <div class="wrap">
                    <span>正面：</span>
                    <div class="item">
                        <div class="canvas">
                            <canvas id="frontCanvas" width="1016" height="642">您的浏览器不支持Canvas</canvas>
                        </div>
                    </div>
                    <span>反面：</span>
                    <div class="item">
                        <div class="canvas">
                            <canvas id="backCanvas" width="1016" height="642">您的浏览器不支持Canvas</canvas>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </section>
</div>

<script src="http://zwtest.benxiangai.com/net/v2/static/js/app.js"></script>
<script>
    Toast('', '正在初始化 ·····');
</script>
<script src="http://zwtest.benxiangai.com/net/v2/static/js/base64s.js"></script>
<script type="text/javascript">
    // 默认排版
    var jsonData = {
        "front_background": "http://localhost:8001/laonian_b.png",
        "back_background": "http://localhost:8001/laonian_z.png",
        "text": [{
            "side": 0,
            "text": "581735 6666666666666",
            "startX": 187,
            "startY": 500,
            "font": 2,
            "size": 13,
            "color": "#000000",
            "style": 0
        },
            {
                "side": 0,
                "text": "姓名：张小凡",
                "startX": 290,
                "startY": 155,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "社保保障号码：350845899388888888",
                "startX": 290,
                "startY": 218,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "社会保障卡号：A66666666",
                "startX": 290,
                "startY": 281,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "发卡日期：2017年1月12日",
                "startX": 290,
                "startY": 344,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "有效期限：10年",
                "startX": 290,
                "startY": 407,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            }
        ],
        "image": [{
            "side": 0,
            "imgstr": portraits,
            "startX": 52,
            "startY": 164
        }]
    }

    // 最新排版
    var newJsonData = null;


    // 编辑器初始化
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "text/javascript",
        lineNumbers: true,
        theme: "solarized",
        indentUnit: 2,
        fixedGutter: false,
        smartIndent: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        matchBrackets: true,
        dragDrop: true
    });
    editor.setValue(JSON.stringify(jsonData, null, "\t"));
    editor.setSize('', document.body.clientHeight - 280 + 'px');

    document.querySelector('article').style.opacity = '1';
    delToast();

    // 实时更新
    editor.on("change", function (instance,changeObj) {
        getJson();
    });

    // 运行预览
    function getJson() {
        var configJSON = null;
        try {
            configJSON = JSON.parse(editor.getValue());
        } catch (err) {
            Toast('errs', '请检查JSON是否合法');
            return
        }
        if (typeof configJSON == 'object') {
            delToast();
            viewCanvas(configJSON);
        }
    }



    viewCanvas(jsonData);
    // 创建canvas画布
    function viewCanvas(data) {
        newJsonData = data;
        // 正面
        var oFront = document.getElementById("frontCanvas");
        var front = oFront.getContext("2d");

        // 反面
        var oBack = document.getElementById("backCanvas");
        var back = oBack.getContext("2d");

        // 清空画布
        clearCanvas(front);
        clearCanvas(back);

        var imgIndex = 0;

        // 插入背景图片
        var front_background = new Image();
        front_background.src = getImageTyle(data.front_background);
        front_background.onload = function () {
            front.drawImage(front_background, 0, 0);
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }
        front_background.onerror = function () {
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }


        var back_background = new Image();
        back_background.src = getImageTyle(data.back_background);
        back_background.onload = function () {
            back.drawImage(back_background, 0, 0);
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }
        back_background.onerror = function () {
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }



        // 遍历图片
        function TraverseImages() {
            var imagesLength = 0;
            if(data.image){
                if(imagesLength == data.image.length){
                    TraverseText();
                }
                for (var i = 0; i < data.image.length; i++) {
                    (function (is) {
                        var oImg = new Image();
                        oImg.src = getImageTyle(data.image[is].imgstr);
                        oImg.onload = function () {
                            imagesLength++
                            if (data.image[is].side == 0) {
                                front.drawImage(oImg, data.image[is].startX, data.image[is].startY);
                            } else if (data.image[is].side == 1) {
                                back.drawImage(oImg, data.image[is].startX, data.image[is].startY);
                            }else{
                                Toast('errs', 'side参数传入有误');
                                return
                            }
                            if(imagesLength==data.image.length){
                                TraverseText();
                                imagesLength = 0;
                            }
                        }
                        oImg.onerror = function () {
                            imagesLength++
                            if(imagesLength==data.image.length){
                                TraverseText();
                                imagesLength = 0;
                            }
                        }
                    })(i);
                }
            }else{
                TraverseText();
            }
        }

        // 遍历文本
        function TraverseText(){
            for (var i = 0; i < data.text.length; i++) {
                (function (is) {

                    if (data.text[is].side == 0) {
                        var objCanvas = front;
                    } else if (data.text[is].side == 1) {
                        var objCanvas = back;
                    } else {
                        Toast('errs', 'side参数传入有误');
                        return
                    }

                    objCanvas.strokeStyle = "rgba(0,0,0,0)";
                    objCanvas.fillStyle = "rgba(0,0,0,0)";

                    // 设置字体
                    switch (data.text[is].font) {
                        case 0:
                            var font = "宋体";
                            break;
                        case 1:
                            var font = "楷体";
                            break;
                        case 2:
                            var font = "微软雅黑";
                            break;
                        case 3:
                            var font = "隶书";
                            break;
                        case 4:
                            var font = "黑体";
                            break;
                        default:
                            Toast('errs', 'font参数传入有误');
                            return
                    }

                    // 文本内容
                    var txt = data.text[is].text;
                    objCanvas.strokeStyle = data.text[is].color;
                    objCanvas.fillStyle = data.text[is].color;

                    // 设置样式
                    var style = data.text[is].style;
                    var styleVal = {
                        "style": "normal",
                        "variant": "normal",
                        "weight": "normal",
                        "size": data.text[is].size*4.2,
                        "family": font
                    };


                    if(style != 0){
                        if(style & 1){
                            styleVal.weight = "bold";
                        }
                        if(style & 2){
                            styleVal.style = "italic";
                        }
                        if(style & 4){
                            setFont()
                            objCanvas.moveTo(data.text[is].startX, data.text[is].startY + styleVal.size+4);
                            objCanvas.lineTo(data.text[is].startX + objCanvas.measureText(txt).width, data.text[is].startY + styleVal.size+4);
                            objCanvas.stroke();
                        }
                        if(style & 8){
                            setFont()
                            //线条粗细
                            objCanvas.lineWidth = 2;
                            //线条起点
                            objCanvas.moveTo(data.text[is].startX, data.text[is].startY + (styleVal.size/2));
                            //线条终点
                            objCanvas.lineTo(data.text[is].startX + objCanvas.measureText(txt).width, data.text[is].startY + (styleVal.size/2));
                            objCanvas.stroke();
                        }
                        setFont()
                    }else{
                        setFont()
                    }

                    function setFont(){
                        objCanvas.font = styleVal.style + " " + styleVal.variant + " " + styleVal.weight + " " + styleVal.size + "px" + " " + styleVal.family;
                    }

                    objCanvas.textBaseline = "top";
                    objCanvas.fillText(txt, data.text[is].startX, data.text[is].startY);
                })(i);
            }
        }

    }

    // 清空画布
    function clearCanvas(objCanvas) {
        objCanvas.fillStyle = "#FFFFFF";
        objCanvas.beginPath();
        objCanvas.fillRect(0, 0, 1016, 642);
        objCanvas.closePath();
    }

    // 获取打印机状态
    function card_status() {
        Toast('res', '正在获取打印机信息');
        send_command("CardPrinter_getStatus", "", function (receivedData) {
            info = JSON.parse(receivedData);
            if (info.status == 100) {
                Toast('res', '获取成功 -- 色带剩余：' + info.inkRibbon);
            } else if (info.status == 300) {
                Toast('errs', '模块未开启！');
            } else if (info.status == 200) {
                Toast('err', '获取失败：' + info.msg);
            }
        });
    }

    // 打印证照
    function card_print() {
        var configJSON = null;
        try {
            configJSON = JSON.parse(editor.getValue());
        } catch (err) {
            Toast('errs', '请检查JSON是否合法');
            return
        }
        if (typeof configJSON == 'object') {
            delToast();
            var datajson = JSON.stringify(configJSON);
            Toast('res', '正在打印');
            send_command(
                "CardPrinter_print",
                datajson,
                function (receivedData) {
                    info = JSON.parse(receivedData);
                    if (info.status == 100) {
                        Toast('res', '打印成功');
                    } else if (info.status == 300) {
                        Toast('errs', '模块未开启！');
                    } else if (info.status == 200) {
                        Toast('err', '打印失败：' + info.msg);
                    }
                }
            );
        }
    }

    // 获取图片
    function getImageTyle(str){
        var newStr = '';
        var topStr = str.substr(0, 4);
        if( topStr == 'http' || topStr == 'file' || topStr == 'HTTP' || topStr == 'FILE' ){
            newStr = str;
        }else{
            newStr = "data:image/jpeg;base64," + str;
        }
        return newStr
    }

</script>
</body>

</html>
